const canvas = document.getElementById('gameUI');
if (canvas.getContext) {
    const ctx = document.getElementById('gameUI').getContext("2d");

    let eyePosition = getRandomPosition(300, 300);
    let currentOffsetNumber = 0;

    //basic setting
    function settingFillColor(...color) {
        if (color.length === 3) {
            ctx.fillStyle = `rgb(${color[0]},${color[1]},${color[2]})`;
        } else if (color.length === 4) {
            ctx.fillStyle = `rgba(${color[0]},${color[1]},${color[2]},${color[3]})`;
        } else {
            console.error("settingFillColor:number of params is not 3 or 4");
        }
    }

    function settingStrokeColor(...color) {
        if (color.length === 3) {
            ctx.strokeStyle = `rgb(${color[0]},${color[1]},${color[2]})`;
        } else if (color.length === 4) {
            ctx.strokeStyle = `rgba(${color[0]},${color[1]},${color[2]},${color[3]})`;
        } else {
            console.error("settingStrokeColor:number of params is not 3 or 4");
        }
    }

    function getRandomInt(max) {
        return Math.floor(Math.random() * Math.floor(max + 1));
    }

    function getRandomPosition(xMax, yMax) {
        return [getRandomInt(xMax), getRandomInt(yMax)];
    }

    function getRandomColor() {
        return [getRandomInt(255), getRandomInt(255), getRandomInt(255)];
    }

    function loadMutiImage(list, onSuccess) {
        let current = 0;
        const total = list.length;
        for (const item of list) {
            loadImage(item, function () {
                current++;
                if (current === total) {
                    onSuccess();
                }
            })
        }
    }

    function loadImage(url, callback) {
        const image = new image();
        image.onload = function () {
            ctx.drawImage(image, 0, 0);
            callback();
        }
        image.src = url;
    }

    function showImageInRandomPosition(url) {
        const [xPosition, yPosition] = getRandomPosition();
        ctx.save();
        ctx.translate(xPosition, yPosition);
        loadImage(url, () => {
            console.log("image load success!");
        })
        ctx.restore();
    }


    //basic painting

    function fillCicle(radius, xPosition = 0, yPosition = 0) {
        ctx.beginPath();
        ctx.arc(xPosition, yPosition, radius, 0, Math.PI * 2, true);
        ctx.fill();
    }

    function strokeCicle(radius, xPosition = 0, yPosition = 0) {
        ctx.beginPath();
        ctx.arc(xPosition, yPosition, radius, 0, Math.PI * 2, true);
        ctx.stroke();
    }

    function fillTrangle(length) {
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-length, length);
        ctx.lineTo(-length, -length);
        ctx.fill();
    }

    function fillCross(width, height, amount) {
        ctx.save();
        for (let i = 0; i < amount; i++) {
            ctx.fillRect(-width / 2, -height / 2, width, height);
            ctx.rotate(Math.PI / amount);
        }
        ctx.restore();
    }

    function fillGear(outRadius, innerRadius, width, height, amount) {
        ctx.save();
        fillCicle(outRadius);
        fillCross(width, height, amount);
        ctx.globalCompositeOperation = "destination-out";
        fillCicle(innerRadius);
        ctx.restore();
    }

    function fillStandardGear() {
        fillGear(75, 45, 200, 25, 5);
    }

    function fillStandardGear2() {
        fillStandardGear();
        fillCicle(30);
    }

    function fillLayerArc(radius, endAngel) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.globalCompositeOperation = "destination-over";
        for (let i = 0; i < 5; i++) {
            ctx.save();
            ctx.fillStyle = settingFillColor(255 - (i * 50), 255 - (i * 50), 255 - (i * 50));
            ctx.arc(0, 0, radius + (5 * i), 0, endAngel);
            ctx.fill();
            ctx.restore();
        }
        ctx.restore();
    }

    function fillStandardLayerArc(radius) {
        ctx.save();
        ctx.globalCompositeOperation = "destination-out";
        fillLayerArc(radius, Math.PI * 3 / 2);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(radius + 20, 0);
        ctx.lineTo(0, -(radius + 20));
        ctx.fill();
        ctx.restore();
    }

    function fillCircleRing(innerRadius, outRadius) {
        ctx.save();
        ctx.globalCompositeOperation = "destination-out";
        fillCicle(outRadius);
        fillCicle(innerRadius);
        ctx.restore();
    }

    function drawCurvePath(startPoint, endPoint, curveness) {
        var cp = [
            (startPoint[0] + endPoint[0]) / 2 - (startPoint[1] - endPoint[1]) * curveness,
            (startPoint[1] + endPoint[1]) / 2 - (endPoint[0] - startPoint[0]) * curveness
        ];
        ctx.moveTo(startPoint[0], startPoint[1]);
        ctx.quadraticCurveTo(
            cp[0], cp[1],
            endPoint[0], endPoint[1]
        );
    }

    function fillKnife(width, topCurveness, bottomCurveness) {
        ctx.save();
        ctx.beginPath();
        drawCurvePath(
            [0, 0],
            [0, width],
            topCurveness
        )
        drawCurvePath(
            [0, width],
            [0, 0],
            bottomCurveness
        )
        ctx.fill();
        ctx.restore();
    }

    function fillStanderEye() {
        ctx.save();
        fillKnife(40, 2, -1);
        fillKnife(40, -2, 1);
        ctx.translate(0, 20);
        fillCicle(12);
        ctx.restore();
    }




    //reFresh UI
    (function update() {

        //get time 
        let now = new Date();
        let millisencond = now.getMilliseconds();
        let second = now.getSeconds();

        //clear canvas
        ctx.clearRect(0, 0, 400, 400);

        (function drawLayerArc() {
            ctx.save();
            ctx.translate(120, 58);
            ctx.rotate(Math.PI);
            fillStandardLayerArc(15);
            ctx.restore();
        })();



        (function drawCanvasBorder() {
            ctx.save();
            let offInterval = millisencond % 2;
            let offsetPosition = offInterval > 250 ? ((offInterval - 250) * (offInterval - 500)) / 1000 : ((offInterval - 250) * offInterval) / -1000;
            ctx.translate(500 + offsetPosition, 500 + offsetPosition);

            ctx.scale(4, 4)
            ctx.rotate(((Math.PI * 2) / 60) * second + ((Math.PI * 2) / 60000) * millisencond);
            settingFillColor(0, 0, 0, 0.3)
            fillGear(125, 119, 260, 6, 15);
            ctx.restore();
        })();

        (function drawGearBorder() {
            ctx.save();
            ctx.translate(400, 400);
            ctx.scale(2, 2);
            ctx.rotate(((Math.PI * 2) / 6) * second + ((Math.PI * 2) / 6000) * millisencond);
            fillStandardGear();
            ctx.restore();
        })();

        (function drawTransParentCross1() {
            ctx.save();
            ctx.translate(400, 400);
            settingFillColor(0, 0, 0, 0.7);
            ctx.rotate(((Math.PI * 2) / 18) * second + ((Math.PI * 2) / 18000) * millisencond);
            fillCross(500, 40, 8);
            ctx.restore();
        })();

        (function drawTransParentCross2() {
            ctx.save();
            ctx.translate(400, 400);
            settingFillColor(0, 0, 0, 0.4);
            ctx.rotate(((Math.PI * 2) / 36) * second + ((Math.PI * 2) / 36000) * millisencond);
            fillCross(620, 30, 10);
            ctx.restore();
        })();

        (function drawGear() {
            ctx.save();
            ctx.translate(400, 400);
            ctx.rotate(((Math.PI * 2) / 6) * second + ((Math.PI * 2) / 6000) * millisencond);
            fillStandardGear2();
            ctx.restore();
        })();

        (function drawText(leftMargin) {
            ctx.save();
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;
            ctx.shadowBlur = 2;
            ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
            ctx.font = "58px serif";
            ctx.fillText("Hell", leftMargin, 100);
            ctx.font = "30px serif";
            ctx.fillText("play", leftMargin, 150);
            ctx.fillText("setting", leftMargin, 200);
            ctx.restore();
        })(20);


        (function drawIcon() {
            ctx.save();
            ctx.translate(14, 145);
            fillTrangle(8);
            ctx.translate(0, 48);
            fillTrangle(8);
            ctx.restore();
        })();

        //图片功能经测试是由于在requestAnimationFram中clearRect造成无法显示问题，尚未解决
        /**(function drawRandomImage() {
            var img = new Image();
            img.src = "./kulou.png";
            img.onload = function () {
                ctx.drawImage(img, 0, 0, 200, 400);
                console.log("success");
            }
        })();
*/
        (function drawRandowEye() {
            ctx.save();
            let newOffsetNumber = (second % 5) + (millisencond * 0.001);
            if (newOffsetNumber < currentOffsetNumber) {
                eyePosition = getRandomPosition(300, 300);
                settingFillColor(0, 0, 0, 0);
            } else {
                let offset = second % 5;
                let offsetAlpha = -((offset + (0.001 * millisencond) - 1) * (offset + (0.001 * millisencond) - 4)) / 2.25;
                settingFillColor(0, 0, 0, offsetAlpha);
            }
            currentOffsetNumber = newOffsetNumber;
            ctx.translate(eyePosition[0], eyePosition[1]);
            fillStanderEye();
            ctx.restore();
        })();

        window.requestAnimationFrame(update);
    })()

} else {
    alert("your browser don't support canvas!");
}